<style scoped>
.login {
    height: 100vh;
    background-image: url("../assets/login_bg.jpg");
    background-size: cover;
}
.login-box {
    min-width: 300px;
    width: 32vw;
    max-width: 400px;
    position: fixed;
    top: 40%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.login-box form > div {
    margin-top: 20px;
}
.login-box form button {
    margin-top: 20px;
    width: 100%;
}
.login-box .vercode {
    width: 100%;
    vertical-align: middle;
}
</style>
<template>
    <div class="login">
        <h1>This is an login page</h1>
        <div class="login-box">
            <Form ref="formCustom" :model="formCustom" :rules="ruleCustom">
                <FormItem prop="usname">
                    <i-input size="large" type="text" v-model="formCustom.usname" placeholder="用户名">
                        <Icon type="ios-contact" slot="prefix" />
                    </i-input>
                </FormItem>
                <FormItem prop="passwd">
                    <i-input
                        size="large"
                        type="password"
                        v-model="formCustom.passwd"
                        password
                        placeholder="密码"
                    >
                        <Icon type="ios-unlock-outline" slot="prefix" />
                    </i-input>
                </FormItem>
                <FormItem prop="vcode">
                    <Row>
                        <i-col span="16">
                            <i-input
                                size="large"
                                type="text"
                                v-model="formCustom.vcode"
                                placeholder="验证码"
                            >
                                <Icon type="ios-cloud-done-outline" slot="prefix" />
                            </i-input>
                        </i-col>
                        <i-col span="7" offset="1">
                            <img class="vercode" :src="captchaPath" alt />
                        </i-col>
                    </Row>
                </FormItem>
                <Button size="large" type="success" ghost @click="handleSubmit('formCustom')">登录</Button>
            </Form>
        </div>
    </div>
</template>
<script>
import http from "../utils/theHttp";
import { getUUID } from "@/utils";
export default {
    name: "login",
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码！"));
            } else {
                // if (this.formCustom.passwdCheck !== "") {
                //     // 对第二个密码框单独验证
                //     this.$refs.formCustom.validateField("passwdCheck");
                // }
                callback();
            }
        };
        const validateUserName = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入用户名！"));
            } else {
                callback();
            }
        };
        const validateVCode = (rule, value, callback) => {
            if (value === "") {
                return callback(new Error("请输入验证码！"));
            } else {
                callback();
            }
        };

        return {
            captchaPath: "",
            dataForm: {},
            formCustom: {
                passwd: "",
                usname: "",
                vcode: "",
                uuid: ""
            },
            ruleCustom: {
                passwd: [{ validator: validatePass, trigger: "blur" }],
                usname: [{ validator: validateUserName, trigger: "blur" }],
                vcode: [{ validator: validateVCode, trigger: "blur" }]
            }
        };
    },
    created() {
        this.getCaptcha();
    },
    methods: {
        handleSubmit(name) {
            console.log(this.formCustom);
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$http({
                        url: "/sys/login",
                        method: "post",
                        data: this.$http.adornData({
                            username: this.formCustom.usname,
                            password: this.formCustom.passwd,
                            uuid: this.formCustom.uuid,
                            captcha: this.formCustom.vcode
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$Message.success("登录成功!");

                            this.$cookie.set("token", data.token);
                            this.$router.replace({ name: "home" });
                        } else {
                            console.log(data.msg)
                            this.$Message.error(data.msg);
                            this.getCaptcha();
                        }
                    });
                } else {
                    this.$Message.error("Fail!");
                }
            });
        },
        // 获取验证码
        getCaptcha() {
            this.formCustom.uuid = getUUID();
            this.captchaPath = this.$http.theAddBaseUrl(
                `/captcha.jpg?uuid=${this.formCustom.uuid}`
            );
            // console.log(this.captchaPath);
        }
    }
};
</script>